<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="commonHead :: commonHEAD('上传文件测试')"/>
<body>
<button type="button" class="layui-btn" id="test1">
    <i class="layui-icon">&#xe67c;</i>上传文件
</button>
<button type="button" class="layui-btn" id="btn">提交</button>


<input type="text" id="delid"  lay-verify="required" placeholder="输入需要删除文件的ID " autocomplete="off" class="layui-input"/>
<button type="button" class="layui-btn" id="delbtn">删除文件</button>
</body>
<div th:include="onloadJs :: onloadJS"></div>
<script  type="text/javascript" th:inline="javascript">
    /* <![CDATA[ */
    $(function () {
        //根据 包ID 获取到这个包里面的文件
        $.post("filelist.json",{packageid:123},function (data) {
            console.info(data);
        });
    })
    $("#delbtn").click(function () {
        //获取到需要删除的文件数据ID
        var delid=$("#delid").val();
        $.post("del.json",{id:delid},function (data) {
            alert(data);
        });
    });
    //上传
    layui.use('upload', function(){
        var upload = layui.upload;
        var packageid = 123;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'fileUpload.json' //上传接口
            ,auto:false
            ,data:{packageid:packageid}
            ,bindAction:"#btn"
            ,multiple:true
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                console.log("文件总数"+obj.total); //得到总文件数
                console.log("请求成功的文件数"+obj.successful); //请求成功的文件数
                console.log("请求失败的文件数"+obj.aborted); //请求失败的文件数
            }
            ,done: function(res){
                //上传完毕回调
                console.info("上传完毕回调"+res);
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
    /* ]]> */
</script>
</html>